import React, { useEffect, useState } from 'react'
import { View, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import Router from '@/utils/router'
import { getCurrentInstance, useReachBottom } from '@tarojs/taro'
import DataTime from './components/DateTime'
import { AtSearchBar } from 'taro-ui'
import { fetchListGoodsSecKillForUse } from '@/server/shop';
import Tabs from '@/components/Tabs'
import "taro-ui/dist/style/components/search-bar.scss";
import "taro-ui/dist/style/components/button.scss";
import "taro-ui/dist/style/components/icon.scss";
import './index.scss'
const RenderTime = (props) => {
    const { data } = props
    const { preheatFlag, price, secKillPrice, secKillTag, secKillStartTime, secKillEndTime, secKillStock, preheatHour, status } = data

    let nowTime = parseInt(new Date().getTime() / 1000);
    let startTime = parseInt(new Date(secKillStartTime.replace(/-/g, '/')).getTime() / 1000)
    let endTime = parseInt(new Date(secKillEndTime.replace(/-/g, '/')).getTime() / 1000)
    if (status === '1') {
        return <View className='channel-color'>
            <DataTime type='start' preheatFlag={preheatFlag} startTime={secKillStartTime} endTime={secKillEndTime}></DataTime>
        </View>
    } else if (
        status === '3'
    ) {
        return <View className='channel-color-before'>已结束</View>
    } else if (status === '2') {
        return <View className='channel-color'>
            <DataTime type='before' startTime={secKillStartTime} endTime={secKillEndTime}></DataTime>
        </View>

    } else {
        return <View className='channel-color-before'>未开始</View>
    }

}
const filterStatus = (data) => {

    const { preheatFlag, price, secKillPrice, secKillTag, secKillStartTime, secKillEndTime, secKillStock, preheatHour } = data
    let nowTime = parseInt(new Date().getTime() / 1000);
    let startTime = parseInt(new Date(secKillStartTime.replace(/-/g, '/')).getTime() / 1000)
    let endTime = parseInt(new Date(secKillEndTime.replace(/-/g, '/')).getTime() / 1000)
    if (nowTime >= startTime && nowTime <= endTime) {
        return '1'
    } else if (
        nowTime >= endTime
    ) {
        return '2'
    } else {
        return '3'
    }
}
const renderStaus = (val) => {
    const { preheatFlag, price, secKillPrice, secKillTag, secKillStartTime, secKillEndTime, secKillStock, preheatHour, status } = val
    let nowTime = parseInt(new Date().getTime() / 1000);
    let startTime = parseInt(new Date(secKillStartTime.replace(/-/g, '/')).getTime() / 1000)
    let endTime = parseInt(new Date(secKillEndTime.replace(/-/g, '/')).getTime() / 1000)
    if (status === '2') {
        return '马上抢'
    } else if (status === '3') {
        return '已结束'
    } else if (status === '0') {
        return '未开始'
    } else {
        return '进行中'
    }
}
const renderStatus = (status) => {
    if (status === '0') {
        return <View className='tag_box_wePage'>
            <View className='tag_box_wePageInfo1'>
                未开始
            </View>
        </View>
    }
    else
        if (status === '1') {
            return <View className='tag_box_wePage'>
                <View className='tag_box_wePageInfo2'>
                    进行中
                </View>
            </View>
        }
        else if (status === '2') {
            return <View className='tag_box_wePage'>
                <View className='tag_box_wePageInfo3'>
                    预热中
                </View>
            </View>
        }
}
const SecondKillList = (props) => {
    const [data, setData] = useState([])
    const [page, setPage] = useState({
        page: '1',
        limit: 10,
        secKillName: '',
    })
    const fetchData = () => {
        fetchListGoodsSecKillForUse({
            ...page,
        }).then(e => {
            const {
                secKillList
            } = e
            setData([...data, ...secKillList])
        })
    }

    useReachBottom(() => {
        setPageUp()
    })
    useEffect(() => {
        fetchData()
    }, [page])
    const setPageUp = () => {
        setPage({
            ...page,
            page: page.page + 1
        })
    }
    const [tabs, setTabs] = useState([{
        label: '未开始',
        key: '0'
    }, {
        label: '进行中',
        key: '1'
    }, {
        label: '预热中',
        key: '2'
    },])
    return <View>
        <AtSearchBar onChange={(e) => {
            setPage(() => {
                setData([])
                return {
                    page: 1,
                    limit: 10,
                    secKillName: e
                }
            })
        }} value={page.secKillName}></AtSearchBar>
        <View className='wxPage_SecondKill_style2'>
            {data.map(val => {
                const { goodsName, goodsCover, secKillName, secKillPrice, status } = val
                return <View style={{ position: 'relative' }} onClick={() => {
                    Router('shopDetail', {
                        args: {
                            goodsId: val.goodsId
                        },
                    })
                }} className='list-style-list'>
                    {renderStatus(status)}
                    <View className='item-image'>
                        <Image style={{ width: '100%', height: "100%", }} mode="aspectFill" src={goodsCover}></Image>
                    </View>
                    <View className='item-info'>
                        <View className='item-info-titleOne'>{secKillName}</View>
                        <View className=''><RenderTime data={val}></RenderTime></View>
                        <View className='item-price'>
                            <View className='price'>￥{secKillPrice}</View>
                            <View disabled={filterStatus(val) === '1'} className='type-button'> {renderStaus(val)} </View>
                        </View>
                    </View>
                </View>
            })}
        </View>
    </View>
}
export default SecondKillList